<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="lib/bootstrap.min.css">
        <script type="text/javascript" src="lib/jquery.min.js"></script>
        <script type="text/javascript">
        if(location.search.indexOf("import") != -1){
            var search = location.search.split("&");
            search = search.filter(function(item){
                if(item.indexOf("import") === -1) return item; 
            });
            location.href = "langServer?" + search.join("&");
        }
        </script>
    </head>
    <style>
        .navbar-inverse {
            background-color: #6f5499;
            border-color: #fff;
        }
        .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
            color: #fff;
            background-color: transparent;
        }
        table {
            border-bottom:1px solid #ddd;
        }
        table th {
            text-align:left;
        }table td {
            text-align:left;
            font-size:12px;
        }
        .add-app {
            color:#FFCF00!important;
        }
        .input-text {
            width:300px;
            border:none;
            text-align:left;
            outline:none;
        }
        .btn-xs {
            outline:none;
        }
        .navbar-nav li:hover {
            background-color:#FFF;
        }
        .navbar-nav li:hover a {
            color:#3E8CB5!important;
        }
        .navbar-nav a:hover .host-layer {
            visibility:visible!important;
            border:1px solid #ddd;

        }
        .host-layer {
            position: absolute;
            width: 265px;
            height: 150px;
            background-color: #FFF;
            left: 0px;
            border: 1px solid #ddd;
            top: 50px;
            border-top: none!important;
        }
        .host-layer p {
            color:#999;
            font-size:12px;
            margin-top:15px;
            padding-left:15px;
        }
        .host-layer p span {
            padding-right:20px;
        }
        .host-layer p input[type=text] {
            width:180px;
            color:#999;
            outline:none;
        }
        .config-server {
            float: right;
            clear: both;
            color: #FFF;
            font-size: 18px;
            margin-top: 12px;
            text-decoration:none!important;
        }
        .config-server:hover {
            color:#fff;
        }
        .lang-list {
            width:200px;
            height:20px;
            margin-top:16px;
        }
        .tab-list a {
            display:inline-block;
            width:60px;
            height:25px;
            line-height:25px;
            margin-right: 15px;
            background-color:#EFEFEF;
            text-align:center;
            color:#1B74CA;
            text-decoration:none;
        }
        .tab-list a.active {
            background-color:#ff6600;
            color:#fff;
        }
        .btn-success, .btn-primary {
            border:1px solid #fff;
            border-radius:3px;
            height:25px;
            font-size:13px;
            line-height:13px;
            cursor:pointer;
            background-color:#286090!important;
            color:#FFF!important;
            padding-right:2px;
            padding-left:2px;
            display:inline-block;
            vertical-align:middle;
        }
        </style>
       
    <body ng-app="lang-server" ng-controller="lang">
        <input type="hidden" id="langType" value='<%=type%>'/>
        <input type="hidden" id="dir" value="<%=curDir%>">
        <div class="navbar navbar-inverse" role="navigation">
                  <div class="container">
                     <a href="configServer" class="config-server">configServer</a>
                    <div class="navbar-header">
                      <a class="navbar-brand" href="#">LANG Config Server</a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                        <select class="lang-list" id="lang-list">
                            <% dir.forEach(function(item){ %>
                                <option <%=(curDir==item ? 'selected="selected"' : '')%>><%=item%></option>
                            <% }); %>
                        </select>
                    </div>
                  </div>
                </div>
                <div class="container">
                    <div class="tab-list">
                            <% langType.forEach(function(lang){ %>
                            <a href="langServer?langType=<%=lang%>&<%=(curDir ? 'dir='+ curDir : '')%>" class="<%=(type == lang ? 'active' : '') %>"><%=lang%></a>
                            <% }); %>
                           
                        
                        <input type="button" class="btn-success" value="一键导入" id="importData"/>
                        <span style="padding-left:30px">源语种:</span>
                        <select style="width:100px" id="src">
                            <option value="zh">中文简体</option>
                            <option value="cht">中文繁文</option>
                            <option value="en">英语</option>
                        </select>　
                        <span>目标语种:</span>
                        <select style="width:100px" id="dist">
                            <option value="zh">中文简体</option>
                            <option value="cht" selected>中文繁文</option>
                            <option value="en">英语</option>
                        </select>　
                        <a class="btn-primary" href="javascript:void(0)" id="translate" style="width: 80px">一键翻译</a>
                    </div>
                    <table class="table" style="margin-top:20px" id="curFiles">
                            <thead>
                                <th>key</th>
                                <th>value</th>
                                <th>操作</th>
                            </thead>
                            <% 
                            var count = 0;
                            for(var i in CurLangFile){ 
                            count++;
                            %>
                            <tr>
                                <td><input type="text" class="input-text input-key" value="<%=i%>"></td>
                                <td><input type="text" class="input-text input-value" value="<%=CurLangFile[i]%>"></td>
                                <td>
                                    <input type="button" class="btn-xs btn-success" data-action="save" style="background-color:green!important;font-size:12px;padding:2px 5px" value="保存">
                                    <input type="button" class="btn-xs btn-warning" value="删除" data-action="delete">
                                    <input type="button" class="btn-xs btn-info" value="增加" data-action="add" >
                                </td>
                            </tr>

                            <% } %>
                            <%if(count==0){%>
                            <tr>
                                <td><input type="text" class="input-text input-key" value=""></td>
                                <td><input type="text" class="input-text input-value" value=""></td>
                                <td>
                                    <input type="button" class="btn-xs btn-success" data-action="save" style="background-color:green!important;font-size:12px;padding:2px 5px" value="保存">
                                    <input type="button" class="btn-xs btn-warning" value="删除" data-action="delete">
                                    <input type="button" class="btn-xs btn-info" value="增加" data-action="add" >
                                </td>
                            </tr>
                            <%}%>
                            
                   </table>
                </div>
        </div>
         <script type="text/javascript">
;(function(window,$){

    var curFiles = $("#curFiles"),
        importData = $("#importData"),
        langList = $("#lang-list"),
        langType = $("#langType").val(),
        dir = $("#dir").val(),
        translate = $("#translate");

    if(langType)  langType = 'langType=' + langType + '&';
    else          langType = '';
    
    curFiles.on("click", '[data-action]', function(e){
        var elem = e.target,
            type = elem.dataset.action;

        switch(type){
            case 'delete':
            del(elem);
            case 'save':
            save();
            break;     
            case 'add':
            add(elem);
            break;
        }
    })

    importData.click(function(){
        importDataFn();
    });


    langList.change(function(e){
        location.href =  'langServer?langType=zh-CN&'+ 'dir=' + langList.val();
    });

    translate.click(function(){
        var srcLang = $("#src").val();
        var distLang = $("#dist").val();
        var langArray = curFiles.find(".input-value");
        for(var index = 0; index < langArray.length; index++) {
            console.log(index);
           (function(index) {
               $.ajax({
                 type: "POST",
                 url: "langServer?action=translate",
                 data: {
                    "from": srcLang,
                    "to": distLang,
                    "query": langArray[index].value,
                    "transtype": "translang",
                    "simple_means_flag": 3,
                    "operType": "translate"
                 },
                 dataType:"text",
                 success: function(result) {
                    result = JSON.parse(result);
                    var trans_result = result.trans_result.data[0];
                    langArray[index].value = trans_result.dst;
                 }
              });
          })(index);
       }
    });

    function importDataFn(){
        location.href = "langServer?action=import&dir=" + dir + '&langType=' + $("#langType").val();
    }

    function del(elem){
        $(elem).parents("tr").remove();
    }

    function add(elem){
        elem = $(elem);
        var tr = elem.parents("tr").clone();
        elem.parents("tr").after(tr);
        tr.find("input[type=text]").first().focus().val('');
    }

    function save(){
        var inputs = curFiles.find(".input-text");
        var leng = inputs.length;
        var data = {};
        for(var i = 0; i < leng; i = i + 2){
            data[inputs[i].value] = inputs[i+1].value;
        }
        $.post('langServer?action=save&langType=' + $("#langType").val() + '&dir=' + dir,{data: JSON.stringify(data)},function(res){
            alert("保存成功");
            console.log(res);
        });
    }


})(window,$);
         </script>
    </body>